<script setup>
import hamburgers from "./hamburgers.vue";

const props = defineProps(["hamburgerMessages"]);
</script>

<template>
  <!-- 所有汉堡的容器 -->
  <div class="meals">
    <!-- 商品信息 -->
    <hamburgers
      :desc="$attrs.desc"
      v-for="item in props.hamburgerMessages"
      :hamburger-message="item"
      :key="item.id"
    ></hamburgers>
    <h3
      v-if="!props.hamburgerMessages || props.hamburgerMessages.length == 0"
      class="none"
    >
      未找到该商品
    </h3>
  </div>
</template>

<style scoped>
.meals {
  /* 需要视口高度减去搜索框 */
  height: calc(100vh - 130rem);
  padding-bottom: 150rem;
  background-color: #ffffff;
  overflow: auto;
}
.none {
  display: flex;
  justify-content: space-around;
  font-size: 60rem;
  font-weight: bold;
  color: #666;
  margin: 550rem auto;
}
</style>
